<template>
    <div>
        <navBar class="navBar"></navBar>
        <div class="content">
            <el-dropdown>
                <el-button type="primary">
                    {{ videoTypeData[videoType] }}<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(value, index) in videoTypeData">
                        <div @click="getVideo(index)">{{ value }}</div>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <div class="grid" v-loading="loading" v-if="!loading && (videoListFilter.length != 0)">
                <div v-for="item in videoListFilter" class="videoBox" @click="gotoVideo(item)">
                    <div class="box">
                        <div class="boxContent">
                            <video :src="item.videoStoreAddress" class="video" preload="auto" loopref="video"></video>
                        </div>
                    </div>
                    <div>{{ item.videoName }}</div>
                </div>
            </div>
            <el-empty description="暂无数据" v-else></el-empty>
        </div>
    </div>
</template>

<script>
import navBar from '@/components/navBar.vue'
import { videoBookmark } from '@/api/video';
export default {
    components: {
        navBar
    },
    data() {
        return {
            videoType: 0,
            videoTypeData: ['全部', '学习', '运动', '搞笑', '动画', '电影', '游戏', '音乐', '生活'],
            userInfo: undefined,
            showDialog: false,
            uploadData: {
                videoType: undefined,
                userId: undefined
            },
            loading: false,
            videoList: new Array()
        }
    },
    computed: {
        videoListFilter() {
            return this.videoList.filter(item => this.videoType == 0 || item.videoClassificationId == this.videoType - 1)
        }
    },
    mounted() {
        this.userInfo = this.$store.getters.token
        this.uploadData.userId = this.userInfo.userId
        this.getVideoList()
    },
    methods: {
        getVideoList() {
            const data = {
                userId: this.userInfo.userId
            }
            videoBookmark(data).then(res => {
                this.videoList = res.data
            })
        },
        getVideo(index) {
            this.videoType = index
        },
        primaryDialog() {
            this.$refs.uploadRef.$refs["upload-inner"].handleClick();
            this.showDialog = false
        },
        gotoVideo(value) {
            value.videoAddress = value.videoStoreAddress
            this.$store.commit('videoData/setVideoData', value)
            this.$router.push({ path: '/video' })
        }
    }
}
</script>

<style scoped>
.navBar {
    position: sticky;
    top: -178px;
    z-index: 1;
}

.content {
    width: 80%;
    min-width: 1100px;
    margin: auto;
    padding-top: 30px;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 20px;
    row-gap: 20px;
    margin-top: 10px
}

.videoBox {
    overflow: hidden;
    border-radius: 10px;
    background-color: rgba(125, 125, 125, 0.5);
}

.videoBox>div:last-child {
    padding: 0 10px;
}

.box {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.upload-demo,
.upload-demo::v-deep>.el-upload,
.upload-demo::v-deep>.el-upload>.el-upload-dragger {
    width: 100%;
    height: 100%;
}

.upload-demo {
    position: relative;
}

.upload-demo::v-deep>.el-upload-list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.boxContent {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    line-height: 200px;
    font-size: 24px;
    color: black;
    background-color: gray;
}

.video {
    height: 100%;
    width: 100%;
}
</style>